<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <link href="//cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
    <style>
        * {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
    </style>
</head>
<body>
<div id="app">
    <transition>
        <router-view></router-view>
    </transition>
</div>


<template id="chatroom">
    <div>
        <my-header></my-header>
        <keep-alive>
            <my-body></my-body>
        </keep-alive>
        <my-foot></my-foot>
    </div>
</template>
<template id="my-header"    >
    <div>
        <el-row>
            <el-col :span="6" :offset="3">
                <el-button icon="circle-check" :disabled="connected" type="primary" @click="connectWS">Connect</el-button>
                <el-button icon="circle-cross" :disabled="!connected" @click="disconnectWS">Disconnect</el-button>
            </el-col>
            <el-col :span="12">
                <el-input
                        v-model="content"
                        placeholder="type type.."
                        @keyup.enter.native="sendMessage">
                    <span slot="prepend">Input something..</span>
                    <el-button icon="d-arrow-right" :disabled="!connected" slot="append" @click="sendMessage">
                        Send
                    </el-button>
                </el-input>
            </el-col>
        </el-row>
    </div>

</template>
<template id="my-body">
    <div>
        <div v-show="connected">
            <el-row type="flex" justify="center" style="margin-top: 5px;">
                <el-col :span="20">
                    <el-table :data="messages" stripe height="550" empty-text="Do not have messages.">
                        <el-table-column prop="content" label="Message" width="700"></el-table-column>
                        <el-table-column label="Date">
                            <template scope="scope">
                                <el-icon name="time"></el-icon>
                                <span style="margin-left: 10px">{{ formatDate(scope.row.date) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="Operate">
                            <template scope="scope">
                                <el-button-group>
                                    <el-tooltip :enterable="false" content="copy" placement="top">
                                        <el-button
                                                class="copyButton"
                                                type="info"
                                                size="small"
                                                icon="document"
                                                :data-clipboard-text="scope.row.content">
                                        </el-button>
                                    </el-tooltip>
                                    <el-tooltip :enterable="false" content="delete.." placement="top">
                                        <el-button type="info" size="small" icon="delete" @click="deleteThat(scope.row.date)"></el-button>
                                    </el-tooltip>
                                </el-button-group>
                            </template>
                        </el-table-column   >
                    </el-table>
                </el-col>
            </el-row>
        </div>
        <div v-show="!connected">
            <my-static></my-static>
        </div>
    </div>
</template>
<template id="my-foot">
    <el-row type="flex" justify="center">
        <el-col :span="20">
            <el-menu :router="true" :default-active="routeIndex" @select="routeWhere" mode="horizontal">
                <el-menu-item :route="{ name:'chatroom~' }" index="room">ChatRoom</el-menu-item>
                <el-menu-item :route="{ name:'something~' }" index="something">Something</el-menu-item>
                <el-menu-item index="3" @click="logout">Logout</el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script src="//cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="//cdn.bootcss.com/vuex/2.3.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

<script src="//cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="//cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>

<script src="//cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>

<script src="/js/app.js"></script>

</body>
</html>
